<!--
 * @Author: panda
 * @Date: 2022-05-18 10:17
 * @Description: 上传视频页面
-->
<template>
  <el-form style="margin: 20px" :model="video" label-width="120px">
    <el-form-item label="视频文件: ">
      <UploadVideo @video-url="getVideoUrl" :video-url="video.videoUrl" />
    </el-form-item>

    <div v-show="isShowElse">
      <el-form-item label="封面: ">
        <UploadImage :coverUrl="video.cover" @file-url="getImgUrl" />
      </el-form-item>

      <el-form-item label="标题: ">
        <el-input v-model="video.title" />
      </el-form-item>
      <el-form-item label="分区: ">
        <el-select v-model="video.categoryId" placeholder="请选择文章分类">
          <el-option :label="c.categoryName" :value="c.id" v-for="c in categories" :key="c.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="类型: ">
        <el-radio-group v-model="video.copyright">
          <el-radio label="原创" />
          <el-radio label="转载" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="简介: ">
        <el-input v-model="video.detail" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </div>
  </el-form>

</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue'
import type {UploadFile} from 'element-plus'
import UploadVideo from "@/components/upload/UploadVideo.vue";
import UploadImage from "@/components/upload/UploadImage.vue";
import {videoApi} from "@/api/video";
import {categoryAPI} from "@/api/category";
import {Categories} from "@/api/model/category";
import { ElNotification} from "element-plus/es";
import {router} from "@/router";
import {useUserStore} from "@/store/modules/user";
import {useRoute} from "vue-router";
import {Video} from "@/api/model/video";

export default defineComponent({
  name: 'PostVideo',
  components: {UploadVideo, UploadImage},
  setup() {
    // 初始化只展示上传视频组件，其他表单信息等待视频上传完毕再展示，copy a站
    const isShowElse = ref(false)
    // 初始化分类
    const category = reactive(new Categories())
    const userStore = useUserStore()
    const route = useRoute()
    // 上传视频参数，视频url，封面，标题，分类id，是否原创，详情，视频文件大小，视频时长，视频长宽
    const videoInfo = reactive(new Video())

    // 提交视频
    const onSubmit = () => {

      if (route.params.id) {
        videoApi.modifyVideo({
          id: route.params.id as unknown as number,
          title: videoInfo.video.title,
          detail: videoInfo.video.detail,
          videoUrl: videoInfo.video.videoUrl,
          cover: videoInfo.video.cover,
          copyright: videoInfo.video.copyright,
          categoryId: videoInfo.video.categoryId,
          duration: videoInfo.video.duration,
          videoSize: videoInfo.video.videoSize
        }).then(
          res => {
            const {code, msg} = res.data
            if (code === 200) {
              ElNotification({
                title: '成功信息',
                message: msg,
                type: 'success',
              })

              router.push("/user/" + userStore.getUserInfo.id)
            } else {
              ElNotification({
                title: '错误信息',
                message: 'code：' + code + '，' + 'msg：' + msg,
                type: 'error',
              })
            }
          }
        )
      } else {
        //提交视频至后台
        videoApi.postVideo(videoInfo.video).then(
          res => {
            const {code, msg} = res.data
            if (code === 200) {
              ElNotification({
                title: '成功信息',
                message: msg,
                type: 'success',
              })
              router.push("/user/" + userStore.getUserInfo.id)
            } else {
              ElNotification({
                title: '错误信息',
                message: msg,
                type: 'error',
              })

            }
          }
        ).catch()
      }
    }


    //移除视频
    const handleRemove = (file: UploadFile) => {
      console.log(file)
    }

    const getImgUrl = (val:any) => {
      videoInfo.video.cover=val
    }

    // 获取视频上传组件emit的视频信息
    const getVideoUrl = (val: any) => {
      console.log(val)
      videoInfo.video.videoUrl = val.videoUrl
      videoInfo.video.cover = val.cover
      videoInfo.video.videoSize = val.videoSize
      videoInfo.video.duration = val.duration
      // videoInfo.video.videoUrl = val.videoUrl
      // videoInfo.videoSize = val.videoSize
      // // videoInfo.videoHeight = val.videoHeight
      // // videoInfo.videoWidth = val.videoWidth
      // videoInfo.duration = val.duration
      // videoInfo.cover = val.cover
      isShowElse.value = true
    }


    onMounted(() => {
      if (route.params.id) {
        isShowElse.value = true
        videoApi.getVideoDetail({id: route.params.id as unknown as number}).then(
          res => {
            const {data} = res.data
            videoInfo.video = data
          }
        ).catch()
      }
      //获取分类
      categoryAPI.getCategories({}).then(
        res => {
          console.log(res)
          const {data} = res.data
          category.categories = data
        }
      ).catch()
    })

    return {
      ...toRefs(videoInfo), getVideoUrl,
      onSubmit,getImgUrl,
      handleRemove, isShowElse,
      ...toRefs(category)
    }
  }

})
</script>

<style scoped>

</style>
